<template>
	<view class="publish-box left clearfix bai">
		<view class="publish-title left clearfix">
			<view class="publish-image-upload left clearfix">
				<uni-icons type="icon-jia6" color="#eee" size="25" custom-prefix="iconfont"></uni-icons>
			</view>
		</view>
		
		<view class="publish-content left clearfix">
			<textarea placeholder="请输入文案" :auto-height="true"></textarea>
		</view>
		
		<view class="publish-button left clearfix">
			<view class="publish-button-item left clearfix" v-for="(item,index) in tools">
				<view><image :src="item.image" mode="aspectFill" style="width:30px;height:30px;"></image></view>
				<view>{{item.title}}</view>
			</view>
			
			<view class="publish-submit right clearfix">
				<uni-icons type="icon-fabusekuai" size="20" color="#fff" custom-prefix="iconfont"></uni-icons>
			</view>
		</view>
	</view>
</template>

<style scoped>
	.publish-image-upload{width:50px;height:50px;line-height:50px;text-align:center;margin:5px;border:1px solid #ddd;border-radius: 5px;cursor:pointer;}
	.publish-submit{width:32px;height:40px;line-height:40px;padding-left:8px;border-radius: 50%;background:#06f;cursor:pointer;}
	.publish-button-item:hover{background:#d9e5f2;color:#06f;}
	.publish-button-item view:first-child{width:30px;height:30px;border-radius: 50%;margin:2.5px;overflow: hidden;}
	.publish-button-item view{float:left;font-size:13px;}
	.publish-button-item{margin-top:5px;padding-left:10px;padding-right:10px;height:35px;color:#666;line-height:35px;background:rgba(220,220,220,.5);border:1px solid #eee;border-radius: 5px;margin-right:10px;cursor: pointer;}
	.publish-button{width:98%;height:40px;margin-left:1%;margin-bottom:20px;}
	.publish-content textarea{width:100%;min-height:70px;font-size:14px;margin-top:20px;}
	.publish-content{width:98%;min-height:70px;margin-left:1%;}
	.publish-title label:first-child{width:30px;height:30px;margin:2.5px;border-radius: 50%;overflow: hidden;}
	.publish-title label{float:left;line-height:35px;}
	.publish-title{width:calc(100% - 20px);padding-left:10px;height:60px;line-height:60px;color:#06f;font-weight:600;font-size:16px;margin-top:5px;}
	.publish-box{width:100%;background:rgb(217,229,242,.3);min-height:150px;border-radius: 10px;border:1px solid #ddd;box-shadow: 0 4px 12px 10px rgba(36, 104, 242, .08);}
</style>

<script>
	export default {
		name:"publish",
		data() {
			return {
				tools:[
					{
						title:'音频创作',
						dec:'批量创作音频',
						page:'/pages/audio/index',
						image:'/static/images/create/yinpinchuangzuo.png'
					},
					{
						title:'图生视频',
						dec:'一键创作精彩视频',
						page:'/pages/image/add',
						image:'/static/images/create/tushengshipin.png'
					},
					{
						title:'口播视频',
						dec:'让你的图片动起来',
						page:'/pages/oral/add',
						image:'/static/images/create/kouboshipin.png'
					},
					{
						title:'批量视频混剪',
						dec:'一分钟生成1000条视频',
						page:'/pages/videos/add',
						image:'/static/images/create/shipinpilianghunjian.png'
					}
				]
			};
		}
	}
</script>
